import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import styles from './index.module.less';
import ProjectInfo from './projectInfo';
import CloseBar from '../../components/CloseBar';
import SideContainer from '../common/sideRender/sideContainer';
import BannerTips from '../../components/BannerTips';

@inject(({ projectState, userState, commonState }) => ({ projectState, userState, commonState }))
@observer
class ProjectDetail extends Component {

	render() {
		const { projectState, userState, commonState, bannerTips } = this.props;
		const { detailData, infoField, identities } = projectState;
		return (
			<div className={styles.wrapDetail}>
				<div className={styles.detail}>
					<div className={styles.detailHeader}>
						{commonState.sideOpen ? null : <CloseBar />}
					</div>
					<BannerTips
						show={!!bannerTips}
						autoplay={!!(bannerTips && bannerTips.tips)}
						type={bannerTips && bannerTips.type}
						message={bannerTips && bannerTips.message}
						tips={bannerTips && bannerTips.tips}
					/>
					{detailData && (
						<div className={styles.detailContent}>
							<ProjectInfo
								key={detailData.projectid}
								projecttype={detailData.projecttype}
								projectState={projectState}
								infoField={infoField}
								identities={identities}
								userState={userState}
								detailData={detailData}
								commonState={commonState}
							/>
						</div>
					)}
				</div>
				<SideContainer
					showContent={!!detailData}
					type={2}
					sideOpen={commonState.sideOpen}
					activeChange
					commonState={commonState}
				/>
			</div>
		);
	}
}

export default ProjectDetail